<template>
  <div class="scrool">
      <div id="labourChart"></div>
  </div>
  <div class="text">hello</div>
</template>

<script setup>
/* eslint-disable */
import {onMounted,ref, reactive,computed} from "vue"
import { init, ZRenderType, Sector, Circle, Arc, Line, Text, Image } from 'zrender'
import {options,coreData,ChartColorArr} from '@/components/charts/data'

const props = defineProps({
     size:{
      type:Number,
      default:200
     }
})

const zr = ref(null)
const group = ref({})
const group4 = ref({})
const group5 = ref({})
const datas = reactive({
      step:30,  //梯形每一层步进的半径大小
      points:[250,250],   //大圆的圆心坐标
      groupgap:10,
      angle:270,   //其实渲染角度
      left:0,
      top:0
})

const coreQualityList = computed(() => {
  return coreData.map((item, index) => {
    const data = ChartColorArr.find(ele => ele.text === item.name)
    const val = data ?? ChartColorArr[0]
    return {
      ...item,
      ...val
    }
  })
})

// 初始化
const initZRender = () => {
  const ele = document.getElementById('labourChart')
  zr.value = init(ele, { renderer: 'svg' })
  drawChart()
}

// 更新数据开始画图
const drawChart = () => {
  if (!zr.value) initZRender()
  if (!coreQualityList.value.length) return
  const circleRadius = 500 / 2 
  const center = { x: 500 / 2, y: 500 / 2 }

  const circleMargin = 16
  const radius = circleRadius - circleMargin
  let startAngle = 0
  let endAngle = 0

  const baseAngle = Math.PI * 2 / coreQualityList.value.length
  const smallRadius = radius / 5 * 2
  const scaleRadius = smallRadius
  const gapRadius = (radius - scaleRadius) / 6
  drawScaleLine(gapRadius, 0, 2 * Math.PI, center, scaleRadius)
  // 遍历五育数据
  coreQualityList.value.forEach((core, index) => {
    startAngle = index * baseAngle + Math.PI * 0.01 - Math.PI * 0.5
    endAngle = startAngle + baseAngle - Math.PI * 0.01
    const childBaseAngle = (endAngle - startAngle) / core.children.length
    // 遍历子项
    core.children.forEach((child, childIndex) => {
      const childStartAngle = childIndex === 0 ? startAngle + childIndex * childBaseAngle : startAngle + childIndex * childBaseAngle + Math.PI * 0.005
      const childEndAngle = childIndex === 0 ? childStartAngle + childBaseAngle : childStartAngle + childBaseAngle - Math.PI * 0.005
      const value = child.type ?? 3
      let r0 = 0   // 内半径
      // 根据五育子项数据画扇形
      for (let i = value; i >= 0; i--) {
        r0 = scaleRadius + (gapRadius * (i + 1))
        drawSector(center.x, center.y, r0, r0 - gapRadius, childStartAngle, childEndAngle, value === 0 ? '#E7ECEE' : core.colors[i])
      }
      const angleItem = childStartAngle + (childEndAngle - childStartAngle) / 2
      const ax = center.x + smallRadius * Math.cos(angleItem) * 1.25
      const ay = center.y + smallRadius * Math.sin(angleItem) * 1.25
      drawText(child.name, 15, ax, ay, value === 0 ? '#33333399' : core.textColor, 500, angleItem)
    })
    // 绘制内部的德智体美劳
    drawSector(center.x, center.y, smallRadius, smallRadius - 0.7 * gapRadius, startAngle, endAngle, core.rectColor)
    // 中间的突起
    const templateStart = startAngle + (endAngle - startAngle) / 4
    const templateEnd = endAngle - (endAngle - startAngle) / 4
    drawSector(center.x, center.y, smallRadius * 0.9, smallRadius - 0.7 * gapRadius, templateStart, templateEnd, core.color)
    drawSector(center.x, center.y, smallRadius - 0.7 * gapRadius, smallRadius - 2 * gapRadius, startAngle, endAngle, core.color)
    const titleAngleItem = startAngle + (endAngle - startAngle) / 2
    const tx = center.x + smallRadius * Math.cos(titleAngleItem) * 0.7
    const ty = center.y + smallRadius * Math.sin(titleAngleItem) * 0.7
    // 德智体美劳文字
    drawText(core.text, 20, tx, ty, core.textColor, 600)
    // drawImage(coreIcon.value, center.x - smallRadius, center.y - smallRadius, smallRadius*2, smallRadius*2)
  })
}

// 绘制文字
const drawText = (text, fontSize, x, y, fill = '#333333', fontWeight=400,
  rotation = 0, verticalAlign = 'middle', align = 'center') => {
  const textShape = new Text({
    style: {
      text,
      fontSize,
      fontWeight,
      fill: fill,
      x,
      y,
      align,
      verticalAlign
    }
  })
  textShape.originX = x
  textShape.originY = y
  textShape.rotation = getRotation(rotation)
  zr.value?.add(textShape)
}

// 获取文字旋转角度
const getRotation = (angleArea) => {
  const angle = (angleArea + Math.PI * 2) % (2 * Math.PI)
  if(angle >= 0 && angle < Math.PI / 2) {
    return -angle
  } else if(angle >= Math.PI / 2 && angle < Math.PI * 1.5) {
    return Math.PI - angle
  } else {
    return -angle
  }
}

// 绘制刻度线圈
const drawScaleLine = (scale, startAngle, endAngle, center, radius, split = 5) => {
  // 根据分隔循环
  for (let i = 1; i <= split; i++) {
    const baseRadius = radius + scale * i
    const arcShape = new Arc({
      shape: {
        cx: center.x,
        cy: center.y,
        r: baseRadius,
        startAngle,
        endAngle
      },
      style: {
        lineWidth: 1,
        lineDash: [5],
        stroke: '#e3e7e9',
      }
    })
    zr.value.add(arcShape)
  }
}

// 绘制扇形
const drawSector = (cx, cy, r, r0, startAngle, endAngle, fill = '#333333',) => {
  const smallSector = new Sector({
    shape: {
      cx,
      cy,
      r,
      r0,
      startAngle,
      endAngle,
    },
    style: {
      lineWidth: 2,
      stroke: 'none',
      fill,
    }
  })
  zr.value.add(smallSector)
}

// 绘制图片
const drawImage = (url, x, y, width, height) => {
  const imageCtx = new Image({
    style: {
      image: url,
      x: x,
      y: y,
      width,
      height
    }
  })
  zr.value.add(imageCtx)
}


onMounted(() => {
  initZRender()
})
</script>

<style scoped>
.scrool {
  position: relative;
  height: 600px;
  width: 800px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
#labourChart {
  width:500px;
  height:500px;
}
.text {
  position: absolute;
  border: 1px solid #f40;
  left:v-bind(left);
  top:v-bind(top);
}


</style>